<mat-toolbar>
    <button mat-icon-button (click)="settings()">
        <mat-icon>settings</mat-icon>
    </button>
    <span>SpringCloud代码生成器</span>
    <!--    <span fxFlex></span>-->
    <!--    <button mat-icon-button color="accent">-->
    <!--        <mat-icon>refresh</mat-icon>-->
    <!--    </button>-->
</mat-toolbar>

<div style="margin: 10px;" fxLayout="column">
    <form #dbFormEl="ngForm">
        <div fxLayout="row" fxLayoutAlign="center center">
            <b>数据库配置</b>
            <div fxFlex fxLayout fxLayoutAlign="end">
                <span *ngIf="checkDbTask?.value">连接成功</span>
                <span *ngIf="checkDbTask?.isError">{{checkDbTask.errorMsg}}</span>
            </div>
            <button mat-button color="accent" (click)="checkDb(dbFormEl)">测试连接</button>
        </div>
        <mat-divider></mat-divider>

        <div fxLayout="column">
            <mat-form-field fxFlex>
                <input #hostEl="ngModel" type="text" matInput placeholder="主机" name="host"
                       [(ngModel)]="config.host" required>
                <mat-error *ngIf="hostEl.getError('required')">必填项</mat-error>
            </mat-form-field>

            <mat-form-field fxFlex>
                <input #portEl="ngModel" type="number" matInput placeholder="端口" name="port"
                       [(ngModel)]="config.port" required>
                <mat-error *ngIf="portEl.getError('required')">必填项</mat-error>
            </mat-form-field>

            <mat-form-field fxFlex>
                <input #usernameEl="ngModel" type="text" matInput placeholder="用户名" name="username"
                       [(ngModel)]="config.username" required>
                <mat-error *ngIf="usernameEl.getError('required')">必填项</mat-error>
            </mat-form-field>

            <mat-form-field fxFlex>
                <input type="password" matInput placeholder="密码" name="password"
                       [(ngModel)]="config.password">
            </mat-form-field>

            <mat-form-field>
                <input #databaseEl="ngModel" type="text" matInput placeholder="数据库名" name="database"
                       [(ngModel)]="config.database" required>
                <mat-error *ngIf="databaseEl.getError('required')">必填项</mat-error>
            </mat-form-field>

            <mat-form-field>
                <input type="text" matInput placeholder="表名称前缀" name="tableNamePrefix"
                       [(ngModel)]="config.tableNamePrefix">
            </mat-form-field>
        </div>
    </form>

    <br>

    <form #projectFormEl="ngForm">
        <div fxLayout="row" fxLayoutAlign="center center">
            <b>项目配置</b>
            <div fxFlex></div>
        </div>
        <mat-divider></mat-divider>
        <div fxLayout="column">
            <mat-form-field>
                <input #projectRootEl="ngModel" matInput placeholder="项目根目录" name="projectRoot"
                       [(ngModel)]="config.projectRoot" readonly (click)="openDirectory()" required>
                <mat-icon matSuffix style="cursor: pointer" (click)="openDirectory()">
                    folder
                </mat-icon>
                <mat-error *ngIf="projectRootEl.getError('required')">必填项</mat-error>
            </mat-form-field>

            <mat-form-field>
                <input #moduleNameEl="ngModel" type="text" matInput placeholder="模块名称"
                       name="moduleName" [(ngModel)]="config.moduleName" required>
                <mat-error *ngIf="moduleNameEl.getError('required')">必填项</mat-error>
            </mat-form-field>

            <mat-form-field>
                <input #pkgEl="ngModel" type="text" matInput placeholder="包名" name="package"
                       [(ngModel)]="config.package" required>
                <mat-error *ngIf="pkgEl.getError('required')">必填项</mat-error>
            </mat-form-field>

            <mat-form-field>
                <mat-select #templateEl="ngModel" placeholder="选择模板" name="template"
                            [(ngModel)]="selectedTemplate" required>
                    <mat-option *ngFor="let temp of templates" [value]="temp">
                        {{temp.name}}
                    </mat-option>
                </mat-select>
                <mat-error *ngIf="templateEl.getError('required')">必填项</mat-error>
            </mat-form-field>
        </div>
    </form>

    <button mat-flat-button color="accent" [disabled]="!isEnabled(dbFormEl, projectFormEl)"
            (click)="generate(dbFormEl, projectFormEl)">
        生成代码
    </button>
    <mat-error *ngIf="generateTask?.errorMsg" style="margin-top: 8px">
        {{generateTask.errorMsg}}
    </mat-error>
</div>
